vue项目 设置scrollTop不起作用(解决方法及原因) |
您所在的位置:网站首页 › webview scrollTo不生效 › vue项目 设置scrollTop不起作用(解决方法及原因) |
1、场景恢复 activated() { this.$refs.viewBox.scrollTop = 100 console.log(this.$refs.viewBox.scrollTop) } 控制台显示 0 2、解决办法 activated() { this.$nextTick(() => { this.$refs.viewBox.scrollTop = 100 }) console.log(this.$refs.viewBox.scrollTop) } 控制台显示 100 3、原因 先考虑一个核心问题,activated究竟是在vue生命周期的哪个节点执行呢? 我们知道,要想使用activated,必须设置keep-alive(缓存组件,自身不会渲染dom元素)。当 keepAlive为 true时,keep-alive包裹的动态组件会被缓存。 当你的组件在 keep-alive内被切换,组件里的 activated 函数就会执行。也就是说,activated 方法执行的时候,并不会考虑你组件里的dom是否已渲染(大概率是没有渲染,毕竟组件一切换activated 就开始执行,页面的dom渲染根本来不及),dom都还没渲染,this.$refs.viewBox.scrollTop这种给dom赋值的代码肯定是赋值不上的。 再说一下 this.$nextTick() 方法,$nextTick 是在下次 DOM 更新结束之后执行延迟回调,意思很简单,就是等待dom刷新出来之后再执行的函数。简直就是activated里给dom赋值时的御用函数有没有。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |